<template>
  <div class="windowInfo">
    <div class="cars">
      <h3>链路状态显示</h3>
      <a-table :columns="columns" :data-source="data" :pagination="false"> </a-table>
    </div>
  </div>
</template>
<script>
const columns = [
  // {
  //   dataIndex: '信道号',
  //   key: 'signalNoise',
  //   slots: { title: 'customTitle' },
  //   scopedSlots: { customRender: 'signalNoise' },
  // },
  {
    title: '名称',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '通信速率',
    dataIndex: 'rate',
    key: 'rate',
    customRender: function (text) {
      return text + 'kbps'
    },
  },
  {
    title: '信噪比',
    key: 'signalNoise',
    dataIndex: 'signalNoise',
    customRender: function (text) {
      return text + 'dB'
    },
    // scopedSlots: { customRender: 'tags' },
  },
  // {
  //   title: 'Action',
  //   key: 'action',
  //   scopedSlots: { customRender: 'action' },
  // },
]

const data = [
  {
    key: '1',
    signalNoise: '20',
    name: '星指上行链路状态信息',
    rate: '256',
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    signalNoise: '10',
    name: '星指下行链路状态信息',
    rate: '32',
    tags: ['loser'],
  },
  {
    key: '3',
    signalNoise: '25',
    name: '星弹上行链路状态信息',
    rate: '1024',
  },
  {
    key: '4',
    signalNoise: '15',
    name: '星弹下行链路状态信息',
    rate: '96',
  },
]

export default {
  data() {
    return {
      data,
      columns,
    }
  },
}
</script>
<style>
.windowInfo .ant-table-thead > tr > th,
.windowInfo .ant-table-tbody > tr > td {
  color: #fff;
  background: rgba(30, 36, 50, 0) !important;
}
.windowInfo .ant-pagination-item a,
.windowInfo .ant-pagination-item-active a,
.windowInfo .ant-pagination-disabled a,
.windowInfo .ant-pagination-disabled:hover a,
.windowInfo .ant-pagination-disabled:focus a,
.windowInfo .ant-pagination-disabled .ant-pagination-item-link,
.windowInfo .ant-pagination-disabled:hover .ant-pagination-item-link,
.windowInfo .ant-pagination-disabled:focus .ant-pagination-item-link {
  background: rgba(30, 36, 50, 0) !important;
}
</style>
<style lang="less" scoped>
.windowInfo {
  h3 {
    color: #fff;
  }
  color: #fff;
  padding: 10px;
  background: rgba(30, 36, 50, 0.6) !important;
}
.ant-table-thead {
  background: rgba(30, 36, 50, 0) !important;
}
.windowInfo .cars .ant-table {
  .windowInfo .ant-table-thead > tr > th {
    color: #fff;
    background: rgba(30, 36, 50, 0) !important;
  }
  .windowInfo .ant-table-thead > td {
    color: #fff;
  }
}
.windowInfo .ant-table-wrapper {
  color: #fff;
  background: rgba(30, 36, 50, 0) !important;
}
.windowInfo .cars,
.windowInfo .cars .ant-card-head,
.windowInfo .cars .ant-card-body {
  background: rgba(30, 36, 50, 0) !important;
}

/* 四角边框--start */
.windowInfo {
  position: relative;
  // width: 300px;
  // /* height: 300px; */
  // margin: 300px auto;
  // /* background: rgba(1, 19, 67, 0.8); */

  border: 2px solid #58d0f3 !important;
  z-index: 1;
}

.windowInfo::before {
  position: absolute;
  content: '';
  top: -2px;
  bottom: -2px;
  left: 30px;
  width: calc(100% - 60px);
  /* border-top: 2px solid #016886; */
  /* border-bottom: 2px solid #016886; */
  border-bottom: 2px solid #4f78ae;
  border-top: 2px solid #4f78ae;
  z-index: -1;
}
.windowInfo::after {
  position: absolute;
  content: '';
  top: 30px;
  right: -2px;
  left: -2px;
  height: calc(100% - 60px);
  border-right: 2px solid #4f78ae;
  border-left: 2px solid #4f78ae;
  z-index: -1;
}

/* 四角边框--end */
</style>
